/*
 * @Author: YYJ
 * @Date: 2023-12-26 11:48:04
 * @Description: 
 * @FilePath: \lgd-admin\src\pages\person\overview\index.tsx
 */
import { PageContainer, ProCard, StatisticCard } from '@ant-design/pro-components';
import RcResizeObserver from 'rc-resize-observer';
import { useEffect, useState } from 'react';
import { queryOverview, OverviewItem } from '@/services/person/overView';
import BalanceLine from './balanceLine';

export default () => {
    const [overviewItem, setOverviewItem] = useState<OverviewItem | undefined>()

    useEffect(() => {
        queryOverview().then(res =>{
            setOverviewItem(res.data)
        })
    }, [])

    return (
        <PageContainer title={false}>
            <RcResizeObserver.Collection key="resize-observer">  
                <ProCard bordered split={'vertical'}>
                    <ProCard split="horizontal">
                        <ProCard split={'vertical'} >
                            <StatisticCard
                                statistic={{
                                    title: '当月净资产',
                                    value: overviewItem?.netAssetRatio,
                                    trend: overviewItem?.netAssetTrend,
                                    tip: overviewItem?.assetSum + " - " + overviewItem?.debtSum + " | 比上月：" + overviewItem?.netAssetSub,
                                    description: (
                                        "¥"+overviewItem?.netAssetSum                                   
                                    ),
                                }}
                            />
                            <StatisticCard
                                statistic={{
                                    title: '上月净资产',
                                    value: overviewItem?.lastNetAssetRatio,
                                    trend: overviewItem?.lastNetAssetTrend,
                                    tip: overviewItem?.lastAssetSum + " - " + overviewItem?.lastDebtSum + " | 比上月：" + overviewItem?.lastNetAssetSub,
                                    description: (
                                        "¥"+overviewItem?.lastNetAssetSum                                   
                                    ),
                                }}
                            />
                        </ProCard>
                        <ProCard split="vertical">
                            <StatisticCard
                                statistic={{
                                    title: '当月收入',
                                    value: overviewItem?.inAmountRatio,
                                    trend: overviewItem?.inAmountTrend,
                                    tip: "比上年：" + overviewItem?.inAmountSub,
                                    description: (
                                        "¥"+overviewItem?.inAmount     
                                    ),
                                }}
                            />
                            <StatisticCard
                                statistic={{
                                    title: '上月收入',
                                    value: overviewItem?.lastInAmountRatio,
                                    trend: overviewItem?.lastInAmountTrend,
                                    tip: "比上年：" + overviewItem?.lastInAmountSub,
                                    description: (
                                        "¥"+overviewItem?.lastInAmount     
                                    ),
                                }}
                            />
                        </ProCard>
                    </ProCard>
                    <ProCard title="学习内容分布图"></ProCard>
                </ProCard>
                <ProCard title="资产负债趋势">
                    <BalanceLine/>
                </ProCard>
            </RcResizeObserver.Collection>
        </PageContainer>
    );
};